<template>
  <transition appear name="slide-fade">
    <el-breadcrumb separator-class="el-icon-arrow-right">

      <el-breadcrumb-item v-for="(item,index) in list" :key="index" :to="{'path': item.path}" >{{item.title}}</el-breadcrumb-item>


    </el-breadcrumb></transition>
</template>

<script>
import store from "@/store/index"
export default {
  name: "Breadcrumb",
  data(){
    return{
      // list:store.getters.breadList
    }
  },
  computed:{
    list(){
      console.log(store.getters.breadList)
      return store.getters.breadList
    }
  }
  // created() {
  //     console.log(this.$route.meta)
  //     this.getBreadcrumb();
  // },
  // methods:{
  //   getBreadcrumb() {

  //     let matched = this.$route.matched;

  //     //判断是不是有首页
  //     if(this.$route.path != '/login') {
  //         this.list.push({"title": "首页","path": "/home"})
  //     }

  //     matched.forEach(element => {
  //         this.list.push({"title":element.meta.title,"path": element.path})
  //     });
  // }

  // }
}

</script>

<style scoped>
.slide-fade-enter-active {
  transition: all .3s ease;
  transition-delay: .3s;
}
.slide-fade-leave-active {
  transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
  /* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
</style>